<template>
	<view class="record-detail page-content">
		<nav-bar back >喂养统计</nav-bar>
		<uni-list>
			<uni-list-item showArrow title="今日统计" />
			<uni-list-item  title="图表统计" style="background: #eee;"/>
			<uni-list-item v-for="item in recordList" showArrow :title="item.name" />
		</uni-list>
		
		
	</view>
</template>

<script setup>
	import { reactive, ref,shallowRef } from 'vue';
	import { onLoad,onReachBottom } from '@dcloudio/uni-app';
	import {recordList} from '@/utils/config.js'
	import dayjs from 'dayjs'
	import {getHistoryList,formatTimeComparison,paginateWithInfo} from '@/utils/index.js'
	
	const queryParams = ref({})
	
	const send = (row)=>{
		uni.$emit('add',row)
		uni.navigateBack({
		  delta: 1
		})
	}
	
	let currentPage = ref(1)
	const allData = ref([])
	const dataList =ref([])
	const pageTitle = ref('')
	
	
	// 使用 onLoad 钩子函数
	onLoad((options) => {
	  console.log('页面加载时的参数:',options,options.type,recordList.map(item=>item.key));
	  queryParams.value = options; // 将参数赋值给响应式变量
	  let name = recordList.find(item=>item.key === options.type).name
	  pageTitle.value=name
	  allData.value = getHistoryList(options.type)
	  dataList.value =[]
	  currentPage.value = 1
	  setDataList()
	});
	
	const setDataList = ()=>{
		dataList.value.push(...paginateWithInfo(allData.value,currentPage.value) )
	}
	
	onReachBottom(()=>{
		console.log('到底部了');
		if(dataList.value.length >= allData.length) return
		currentPage.value++
		setDataList()
	})
	
</script>

<style lang="scss">
.record-detail{
	.record-detail-main{
		padding: 20rpx;
	}
	
	.home-list-item{
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		.name{
			font-size: 32rpx;
		}
		.value{
			font-size: 28rpx;
			margin-top: 15rpx ;
		}
		.remark{
			margin-top:  15rpx;
			font-size: 28rpx;
			color: #ccc;
		}
		.home-list-item-right{
			font-size: 28rpx;
			color: #333;
		}
	}
}
</style>
